<template>
    <div class="userName-wrapper">
        <el-dropdown>
            <div class="el-dropdown-link myLink">
                <div class="avatar">{{avatar}}</div>
                <span class="name">{{userName}}</span>
                <el-icon class="arrowicon">
                    <caret-bottom />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <div class="down-wrapper">
                        <div class="down1" @click="showH">
                            <div class="down1-avatar">{{avatar}}</div>
                            <div class="down1-name">{{userName}}</div>
                        </div>
                        <div class="down-menu" @click="toWorkBench">
                            <img src="./gongzuotai.png" width="14" height="14" alt="">
                            <span>工作台</span>
                            <el-icon class="icon">
                                <arrow-right />
                            </el-icon>
                        </div>
                        <div class="down-menu" @click="toPersonal">
                            <img src="./personal.png" width="14" height="14" alt="">
                            <span>个人信息</span>
                            <el-icon class="icon">
                                <arrow-right />
                            </el-icon>
                        </div>
                        <div class="logout" @click="logoutHandle">退出登录</div>
                    </div>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import { ArrowRight, CaretBottom } from '@element-plus/icons-vue'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            avatar: '',
            userName: ''
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    watch: {
        userInfo: {
            handler() {
                if (this.userInfo) {
                    this.userName = this.userInfo.name || this.userInfo.mobile
                    this.avatar = this.userName ? this.userName.charAt(0) : ''
                }
            },
            immediate: true
        }
    },
    components: { ArrowRight, CaretBottom },
    methods: {
        toWorkBench() {
            this.$router.push({ path: '/workbench' })
        },
        toPersonal() {
            this.$router.push({ path: '/personal' })
        },
        logoutHandle() {
            this.$store.dispatch('user/logout')
            this.$router.push({ path: '/' })
        },
        showH() {
            console.log(this.userInfo)
        }
    },
}
</script>
<style lang="scss">
.userName-wrapper {
    position: absolute;
    right: 50px;
    top: 18px;
    color: #fff;
    cursor: pointer;
    .myLink {
        display: flex;
        align-items: center;
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            text-align: center;
            line-height: 30px;
            background: #3370ff;
            color: #fff;
            font-size: 16px;
            margin-right: 6px;
        }
        .name {
            font-size: 16px;
            color: #c7d6f9;
        }
        .arrowicon {
            color: #c7d6f9;
        }
    }
}
.down-wrapper {
    width: 136px;
    .down1 {
        height: 67px;
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
        .down1-avatar {
            display: inline-block;
            margin-top: 13px;
            width: 24px;
            height: 24px;
            border-radius: 100%;
            text-align: center;
            line-height: 24px;
            background: #3370ff;
            color: #fff;
            font-size: 13px;
            opacity: 0.7347;
        }
        .down1-name {
            font-size: 12px;
            margin-top: 5px;
            text-align: center;
            color: #1f2229;
            line-height: 17px;
        }
    }
    .down-menu {
        display: flex;
        align-items: center;
        height: 34px;
        cursor: pointer;
        font-weight: bold;
        margin: 5px 0;
        img {
            margin: 0 10px;
        }
        span {
            color: #1f2229;
            width: 80px;
        }
        .icon {
            color: #8f9094;
        }
    }
    .logout {
        border-top: 1px solid #e8e8e8;
        text-align: center;
        line-height: 49px;
        font-size: 12px;
        color: #8f9094;
        cursor: pointer;
    }
}
</style>